<template>
  <view>
    <uv-input
      class="inputView"
      :model-value="showVal"
      border="none"
      :placeholder="props.placeholder"
      disabled
    >
    </uv-input>
    <uv-datetime-picker ref="datetimeRef" v-model="timeVal" :mode="props.mode">
    </uv-datetime-picker>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
const datetimeRef = ref();
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  mode: {
    type: String,
    default: "date",
  },
  placeholder: {
    type: String,
    default: "默认提示文字",
  },
});
const emits = defineEmits(["update:modelValue"]);
// 主数据
const showVal = ref("");
const timeVal = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    let value = undefined;
    switch (props.mode) {
      case "datetime":
        value = dataFormat.dateTampToSecond(val);
        emits("update:modelValue", value);
        break;
      case "date":
        value = dataFormat.dateTampToDate(val);
      case "time":
        value = val;
        emits("update:modelValue", value);
      case "year-month":
        value = dataFormat.formatYearMonth(val);
      case "year":
        value = dataFormat.formatYear(val);
        emits("update:modelValue", value);
      default:
        value = dataFormat.dateTampToDate(val);
        emits("update:modelValue", value);
    }
    showVal.value = value;
  },
});
/**格式化时间工具层 */
const dataFormat = {
  /**格式化年月日 时分秒 */
  dateTampToSecond(dateTimeString: any) {
    const dateTime = new Date(dateTimeString);
    const year = dateTime.getFullYear();
    const month = String(dateTime.getMonth() + 1).padStart(2, "0");
    const day = String(dateTime.getDate()).padStart(2, "0");
    const hours = String(dateTime.getHours()).padStart(2, "0");
    const minutes = String(dateTime.getMinutes()).padStart(2, "0");
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  },
  /**格式化年月日 */
  dateTampToDate(timestamp: any) {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  },
  formatYearMonth(dateString: any) {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    return `${year}-${month}`;
  },
  /**格式化年 */
  formatYear(dateString: any) {
    const date = new Date(dateString);
    return date.getFullYear().toString();
  },
};
/***@method */
// const pickerConfirm = (val) => {
//     console.log('val', val);

// }
/**将打开和关闭暴露出去 */
const exposeOpen = computed(() => {
  if (!datetimeRef.value) {
    return { value: null };
  } else {
    return datetimeRef.value?.open;
  }
});
const exposeClose = computed(() => {
  if (!datetimeRef.value) {
    return { value: null };
  } else {
    return datetimeRef.value?.close;
  }
});
defineExpose({
  open: exposeOpen,
  close: exposeClose,
});
</script>

<style lang="scss" scoped>
.inputView ::v-deep .uv-input__content {
  background-color: #fff;
}
</style>
